<template>
  <!-- 左侧快捷工具栏 -->
  <div id="quick-toolbar" class="quick-toolbar">
    <div class="basic-widgets no-user-select">
      <template v-for="(widget, index) in widgets">
        <a-tooltip :key="index" placement="right">
          <template slot="title">
            <span>{{ widget.name }}</span>
          </template>
          <div
            :key="index"
            class="widget"
            :class="[widget.code]"
            :data-widget-code="widget.code"
          >
            <!-- .preview 显示的样式 -->

            <icon class="preview" :name="widget.icon" />

            <!-- .view 拖动时显示的样式 -->
            <div class="view" v-html="widget.template"></div>
          </div>
        </a-tooltip>
      </template>
    </div>
    <!-- end .basic-widgets -->

    <!-- 管理 - 页面、母版、自定义 -->
    <div class="managers no-user-select">
      <div
        v-for="(item, index) in paneModules"
        :key="index"
        @click="()=>{paneModule = index;handle(item.value)}"
        :class="{ 'item-selected widget-selected': paneModule == index }"
        class="widget manage item-hover"
      >
        <icon class="widget" :name="item.icon" />
        <span>{{ item.label }}</span>
      </div>
    </div>
    <!-- end 管理 -->

    <div class="footer">
      <!-- 页面回收站 -->
      <a-tooltip placement="right">
        <template slot="title">
          页面回收站
        </template>
        <div
          class="widget item-hover"
          @click="()=>{paneModule = 90;handle('deleted')}"
          :class="{ 'item-selected widget-selected': paneModule == 90 }"
        >
          <icon name="icon-huishouzhan1" />
          <span>回收站</span>
        </div>
      </a-tooltip>
      <!-- 收起 -->
      <a-tooltip placement="right">
        <template slot="title">
          收起
        </template>
        <div class="widget item-hover" @click="handle(6)">
          <icon name="icon-shouqi" />
        </div>
      </a-tooltip>
    </div>
  </div>
</template>

<script>
import {mapState} from 'vuex'
export default {
  computed: {
    ...mapState({
      view: state=> state.design.view.quickToolBar,
      leftPane: state=> state.design.view.leftPane
    })
  },
  data() {
    return {
      // 默认选中 - 页面（0）、母版（1）、自定义（2）
      paneModule: 0,
      paneModules: [
        {
          label: '页面',
          value: 'page',
          icon: 'icon-yemianguanli1',
          command: 1
        },
        {
          label: '母版',
          value: 'master',
          icon: 'icon-xiugaimuban',
          command: 2
        },
        {
          label: '自定义',
          value: 'custom',
          icon: 'icon-zidingyi',
          command: 3
        },
        {
          label: '数据源',
          value: 'datasource',
          icon: 'icon-shujuyuan',
          command: 4
        }
      ],
      // 快速组件列表
      widgets: [
        {
          code: 'rich_text',
          name: '文字',
          icon: 'icon-wenzigongju',
          template: `<span
                      style="border: 0px;
                      white-space: nowrap;
                      font-size: 11px;
                      padding: 0px;">
                        双击编辑文本
                      </span>`
        },
        {
          code: 'rectangle',
          icon: 'icon-juxing',
          name: '矩形',
          template: `<div
                    style="width:100px;height:100px;backgroup:red;"></div>`
        },
        {
          code: 'rectangle2',
          icon: 'icon-yuan',
          name: '圆',
          template: `11`
        },
        {
          code: 'line',
          icon: 'icon-zhixian_huaban1',
          name: '直线',
          template: `11`
        },
        {
          code: 'image_view',
          icon: 'icon-htmal5icon12',
          name: '图片',
          template: `11`
        },
        {
          code: 'link',
          icon: 'icon-lianjiequyu',
          name: '链接区域',
          template: `11`
        }
      ]
    }
  },
  mounted(){
    console.log('view: ', this.view)
  },
  methods: {
    handle(command) {
      switch (command) {
      case 6:
        // 展开/开启
        this.leftPane.visible = !this.leftPane.visible
        // this.$nuxt.$emit('view-left-pane', {type: 'show', visible: !this.view.visible})
        break
      case 'page':
        console.log('page')
        this.leftPane.sort = ['page']
        break
      case 'master':
        console.log('点击母版')
        this.leftPane.sort = ['master']
        break
      case 'custom':
        console.log('custom')
        this.leftPane.sort = ['custom']
        break
      case 'datasource':
        console.log('datasource')
        this.leftPane.sort = ['datasource']
        break
      case 'deleted':
        console.log('deleted')
        this.leftPane.sort = ['deleted']
        break
      default:
        break
      }
    }
  }
}
</script>
<style lang="less" scoped>
#quick-toolbar {
  font-size: 12px;

  z-index: 15;

  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: space-between;

  width: 45px;
  height: calc(100vh - @toolbar-height);
  padding-top: 14px;

  border-right: 1px solid rgb(219, 219, 219);
  background: rgb(255, 255, 255);

  .widget {
    border-left: 2px solid transparent !important;
  }
  .widget-selected {
    border-left: 2px solid @primary-color !important;
  }
  .widget:active {
    opacity: 0.6;
  }

  .proto-icon {
    width: 22px;
    height: 22px;
  }

  .basic-widgets,
  .footer {
    display: flex;
    align-items: center;
    flex-direction: column;

    width: 100%;

    .widget {
      display: flex;
      align-items: center;
      justify-content: center;

      height: 30px;
      padding: 3px;

      cursor: pointer;

      color: rgb(108, 109, 110);
      border-width: 1px;
      border-style: solid;
      border-color: transparent;
      border-image: initial;

      .view {
        display: none;
      }
    }
  }

  .footer {
    .widget {
      display: flex;
      flex-direction: column;

      width: 100%;
      height: auto;
      padding: 8px 0;

      .icon {
        width: 18px;
        height: 18px;
      }
    }
  }

  .basic-widgets .widget,
  .basic-widgets .drag-widget {
    height: 30px;
    margin-bottom: 15px;
  }

  .basic-widgets .widget:hover {
    border-color: rgb(232, 232, 232);
    background-color: rgb(242, 242, 242);
  }

  .basic-widgets .drag-widget {
    border: 0;
  }

  .basic-widgets .drag-widget:hover {
    background-color: #fff;
  }

  .managers {
    width: 100%;

    .manage {
      display: flex;
      align-items: center;
      flex-direction: column;

      padding: 8px 0;
    }
  }
}
</style>
